<template>
	<view>
		<view-head Title="生理期设置" :isShowR="false"></view-head>
		<view class="view-content">
			<view class="subTitle">
				生理周期
			</view>
			<view class="list">
				<view class="item _df _jb _ac" @click="showPopFn(1)" hover-class="hover">
					<view class="title">
						月经一般持续几天？
					</view>
					<view class="info _df">
						{{value1}}天 <u-icon class="ml10" name="arrow-right" color="#aaa" size="28"></u-icon>
					</view>
					
				</view>
				<view class="item _df _jb _ac" @click="showPopFn(2)" hover-class="hover">
					<view class="title">
						两次月经一般相隔多久?
					</view>
					<view class="info _df">
						{{value2}}天 <u-icon class="ml10" name="arrow-right" color="#aaa" size="28"></u-icon>
					</view>
					
				</view>
			</view>
			<view class="switch _df _jb _ac">
				<view class="title">
					生理期智能预测
				</view>
				<u-switch v-model="checked" @change="switchChange" size="56" active-color="#6387FF" inactive-color="#eee"></u-switch>
			</view>
		</view>
		<u-select :title="selectTitle" v-model="showPop" :list="selectList" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:1,
				value2:'',
				value3:'',
				value4:'',
				show:false,
				mode:'date',
				checked:false,
				showPop:false,
				selectList:[
					{
						value:1,
						label:'1'
					},
					{
						value:2,
						label:'2'
					},
					{
						value:3,
						label:'3'
					},
					{
						value:4,
						label:'4'
					},
					{
						value:5,
						label:'5'
					},
					{
						value:6,
						label:'6'
					},
					{
						value:7,
						label:'7'
					},
					{
						value:8,
						label:'8'
					},
					
				],
				selectTitle:'目标步数'
			};
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods:{
			saveBack(){
				
			},
			change(e){
				
			},
			switchChange(e){
				
			},
			showPopFn(e){
				this.showPop = true
				switch (e){
					case 1:
					this.type = 1
					this.selectTitle = '目标步数'
					break
					case 2:
					this.type = 2 
					this.selectTitle = '活动热量'
					break 
				}
			},
			confirm(e){
				if(this.type == 1){
					this.value1 = e[0].value
				}else{
					this.value2 = e[0].value
				}
				
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn--primary{
		background-color: #FF4651;
		border-color: #FF4651;
	}
	/deep/.uni-picker-view-indicator{
		height: 100rpx;
		line-height: 100rpx;
	}
	/deep/.u-select__body__picker-view__item{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 44rpx;
		color: #000;
		font-family: $uni-font-family-Bold;
	}
	/deep/.u-select__header__title{
		font-size: 38rpx;
		color: #000;
		font-family: $uni-font-family-Medium;
	}
	/deep/.u-select__header__cancel{
		width: 150rpx;
		height: 70rpx;
		background: #edeff0;
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
		color: #000;
		font-family: $uni-font-family-Medium;
	}
	/deep/.u-select__header__confirm{
		width: 150rpx;
		height: 70rpx;
		background: #6387FF;
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 30rpx;
		color: #fff !important;
		font-family: $uni-font-family-Medium;
	}
	/deep/.u-select__header{
		height: auto;
		padding: 20rpx 30rpx 0;
	}
.view-content{
	padding: 0 50rpx 80rpx;
	.time-box{
		margin-bottom: 60rpx;
		.name{
			font-size: 34rpx;
			font-family: $uni-font-family-Bold;
			color: #000;
		}
		.time{
			font-size: 28rpx;
			font-family: $uni-font-family-Medium;
			color: #aaa;
		}
	}
	.subTitle{
		font-size: 24rpx;
		font-family: $uni-font-family-Medium;
		color: #888;
		margin-bottom: 24rpx;
	}
	.switch{
		.title{
			font-size: 34rpx;
			font-family: $uni-font-family-Bold;
			color: #000;
		}
	}
	.list{
		margin-bottom: 40rpx;
		// padding-bottom: 40rpx;
		border-bottom: 1rpx solid #eee;
		.item{
			height: 80rpx;
			margin-bottom: 30rpx;
			padding: 0 20rpx;
			.title{
				font-size: 34rpx;
				font-family: $uni-font-family-Bold;
				color: #000;
			}
			.info{
				font-size: 28rpx;
				font-family: $uni-font-family-Medium;
				color: #aaa;
				margin-left: 10rpx;
			}
			/deep/.uni-input-input{
				font-size: 28rpx;
				font-family: $uni-font-family-Bold;
				color: #aaa;
				width: 100rpx;
				text-align: right;
				margin-right: 10rpx;
			}
		}
	}
}
</style>
